<template>
  <div>
    <div style="padding:8px">
      <el-button type="primary" icon="el-icon-plus" size="60" @click="dialogVisible = true">新增</el-button>
    </div>
    <el-dialog
  title="新增考核"
  :visible.sync="dialogVisible"
  width="30%">
  <!-- 表单 -->
  <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
  <el-form-item
    label="日期"
    prop="age"
  >
  <el-input v-model="form.date" autocomplete="off" placeholder="格式为: xxxx-xx-xx"></el-input>
  </el-form-item>
  <el-form-item
    label="月考核量"
    prop="age"
  >
    <el-input v-model.number="form.month_no" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item
    label="周考核量"
    prop="age"
  >
    <el-input v-model.number="form.week_no" autocomplete="off"></el-input>
  </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleClose(form)">确 定</el-button>
  </span>
</el-dialog>
    <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="日期"
      width="240">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="月考核量"
      width="240">
      <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="50">{{ scope.row.month_no }}</el-tag>
          </div>
      </template>
    </el-table-column>
    <el-table-column
      label="周核量"
      width="240">
      <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="50">{{ scope.row.week_no }}</el-tag>
          </div>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="60"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="60"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog
  title="修改考核"
  :visible.sync="dialogVisible2"
  width="30%">
  <!-- 表单 -->
  <el-form :model="form2" ref="form" label-width="100px" class="demo-ruleForm">
  <el-form-item
    label="日期"
    prop="age"
  >
  <el-input v-model="form2.date" autocomplete="off" placeholder="格式为: xxxx-xx-xx"></el-input>
  </el-form-item>
  <el-form-item
    label="月考核量"
    prop="age"
  >
    <el-input v-model.number="form2.month_no" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item
    label="周考核量"
    prop="age"
  >
    <el-input v-model.number="form2.week_no" autocomplete="off"></el-input>
  </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible2 = false">取 消</el-button>
    <el-button type="primary" @click="handleClose2(form2)">确 定</el-button>
  </span>
</el-dialog>
  <Pagin :count="total" @pageEvent="fetchData" :pageSize="pageSize"></Pagin>
  </div>
</template>

<script>
import {kpiListAPI,kpiDeleteAPI} from '@/api/2-assessment'
 export default {
    data() {
      return {
        dialogVisible:false,//新增弹框
        dialogVisible2: false,//编辑
        form:{
          date: '',
          month_no: '',
          week_no: ''
        },
        form2:{

        },
        total: 0, // 列表总行数
        currentPage: 1,
        pageSize: 10,
        dataList:[],
        tableData: [{
          date: '2016-05-02',
          month_no: '400',
          week_no: '100'
        }
      ]
      }
    },
    created(){
     this.kpiList()
    },
    components: {
    Pagin: () => import('c/Pagin')
  },
    methods: {
      //编辑
      handleEdit(index, row) {
        this.dialogVisible2 = true
        this.form2 = row
        console.log(index, row);
      },
      //删除
     async handleDelete(index, row) {
      // const res = await kpiDeleteAPI(row.id)
      this.dataList.splice(index, 1)
          this.fetchData(this.currentPage)
          this.total = this.dataList.length
          this.$message.success('删除成功')
      },
      handleClose(form) {
        console.log(form);
        //关闭弹框
       this.dialogVisible = false
       this.tableData.push(form)
      },
      //列表
     async kpiList(){
       const res = await kpiListAPI()
       this.dataList = res.data
       this.total = this.dataList.length
       this.fetchData(this.currentPage)
      //  console.log(res);
      },
      //分页
      fetchData (count) {
      var list = this.dataList
      var from = (count - 1) * this.pageSize
      const to = count * this.pageSize
      this.tableData = []
      for (; from < to; from++) {
        if (list[from]) {
          this.tableData.push(list[from])
        }
      }
    },
    //修改关闭
    handleClose2(){
      this.dialogVisible2 = false

    }
    }
  }
</script>

<style>

</style>
